<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../public/js/layui/css/layui.css" media="all">
</head>

<body>
    <div>{{staffs[0].name}}</div>
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script src="../public/js/jquery-1.11.0.min.js"></script>

    <script type="text/html" id="barDemo">
  <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
    <a id="editBtn" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="add">添加人员</button>
          <!-- <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
          <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> -->
        </div>
      </script>
    <script src="../public/js/layui/layui.all.js" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form',], function () {
            var table = layui.table;
            var form = layui.form;

            table.render({
                elem: '#test'
                , url: '/api'
                , toolbar: '#toolbarDemo'
                , title: '用户数据表'
                // , totalRow: true
                , cols: [[
                    // { field: '_id', title: 'ID', fixed: 'left', unresize: true, sort: true, }
                    { field: '_id', title: 'ID', fixed: 'left', }
                    , { field: 'name', title: '姓名', edit: 'text' }
                    , { field: 'gender', title: '性别', sort: true }
                    , { field: 'age', title: '年龄', sort: true, totalRow: true }
                    , { field: 'position', title: '职务' }
                    , { field: 'phone', title: '电话' }
                    , { field: 'address', title: '地址' }
                    , { field: '', title: '', fixed: 'right', align: 'center', toolbar: '#barDemo' }

                ]]
                , page: true
                , response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据

                    return {
                        "code": 200, //解析接口状态
                        "msg": "", //解析提示文本
                        // "count": res.total, //解析数据长度
                        "data": res //解析数据列表
                    };
                }
            });

            //监听行工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                console.log(obj.event);
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        content: '/edit'
                    });


                    // layer.alert('编辑行：<br>' + JSON.stringify(data._id))
                    // layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        layer.open({
                            type: 2,
                            area: ['500px', '500px'],
                            content: '/layuidata/new'
                        });
                        break;

                };
            });


        });
    </script>
</body>

</html>